<template>
  <div>
    <!-- 专题精选  :autoplay="3000"-->
    <section
      v-for="item in topicList"
      :key="item.id"
      class="topicgoods"
      @click="goToProduct"
    >
      <img
        v-lazy="item.scene_pic_url"
        :alt="item.title"
      >
      <h4 class="van-ellipsis">{{item.title}}</h4>
      <p class="van-ellipsis">{{item.subtitle}}</p>
      <div class="price">
        {{item.price_info| priceFilter}}
      </div>
    </section>
    <van-pagination
      v-model="params.page"
      :page-count="totalPages"
      mode="simple"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import { GetTopicGoodsList } from "../request/api";
export default {
  data() {
    return {
      // 分类请求参数
      params: {
        page: 1,
        size: 10,
      },
      totalPages: 0,
      topicList: [],
    };
  },
  created() {
    //请求数据
    this.getTopicData();
  },
  updated() {
    // window.scrollTo(0, 0);
  },
  components: {},

  computed: {},

  methods: {
    //请求数据
    async getTopicData() {
      const res = await GetTopicGoodsList({ params: this.params }).catch(
        (err) => console.log(err)
      );
      if (res.errno !== 0) {
        return this.$toast.fail("请求专题数据失败！");
      }
      // console.log("专题数据", res.data);
      let topicList = res.data.data;
      this.topicList = topicList;
      this.totalPages = res.data.totalPages;
    },
    handlePageChange() {
      // push没用。。。
      // this.$router.push("/topic");
      //回到页面顶部
      window.scrollTo(0, 0);
      //或者用
      // document.documentElement.scrollTop = 0;
      this.getTopicData();
    },
    //跳转商品详情
    goToProduct() {
      this.$toast.fail("没有接口数据！");
    },
  },
};
</script>

<style lang='less' scoped>
.topicgoods {
  background-color: #fff;
  text-align: center;
  img {
    width: 100%;
  }
  h4 {
    font-size: 0.16rem;
    line-height: 0.4rem;
  }
  p {
    margin-top: -0.05rem;
    line-height: 0.3rem;
  }
  .price {
    line-height: 0.3rem;
    color: darkred;
  }
}
.van-pagination {
  //偷懒不定位
  padding-bottom: 0.5rem;
}
</style>